<template>
  <div>
    <van-nav-bar title="影院" left-text="北京∨" @click="city">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- search -->

    <van-dropdown-menu active-color="#ff5f16">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="box" v-for="item in 5" :key="item">
        <div class="box-left">
          <span class="le-word">北京通州区纳特园区10号楼</span>
          <span class="le-wor">北京市通州区纳特园区10号楼</span>
        </div>
        <div class="box-right">
          <div class="a">
            <span class="aa">
              <i>￥</i>
              <span class="in">34</span>
            </span>
            <span class="up">起</span>
          </div>
          <span class="b">
            <strong>距离未知</strong>
          </span>
        </div>
      </div></van-pull-refresh
    >
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
function city() {
  router.push('/address')
}
const loading = ref(false)
const onRefresh = () => {
  setTimeout(() => {
    loading.value = false
  }, 1000)
}
const value1 = ref(0)
const value2 = ref('a')
const value3 = ref('a')
const option1 = [
  { text: '全程', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 }
]
const option2 = [
  { text: 'APP订票', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' }
]
const option3 = [
  { text: '最近去过', value: 'a' },
  { text: '好评排序', value: 'b' },
  { text: '销量排序', value: 'c' }
]
</script>

<style scoped>
.box {
  border-bottom: 1px solid #f8f8f8;
  padding: 15px;
  display: flex;
}
.box-left {
  width: 280px;
}
.le-word {
  color: #191a1b;
  font-size: 15px;
  float: left;
}
.box-right {
  width: 70px;
  text-align: center;
  float: right;
  margin-right: -5px;
}
.le-wor {
  width: 220px;
  color: #797d82;
  font-size: 12px;
  margin-top: 5px;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.up {
  color: #ff5f16;
  font-size: 10px;
}
i {
  color: #ff5f16;
  font-size: 11px;
  font-style: normal;
}
.in {
  font-size: 15px;
  color: #ff5f16;
}
strong {
  font-size: 11px;
  color: #797d82;
}
.van-nav-bar >>> .van-nav-bar__text {
  color: #000;
}
.van-nav-bar .van-icon {
  color: #000;
}
</style>
